]> dgit.raspbian.org Git - gnome-shell.git/commitdiff
theme: Support accent color
authorAlice Mikhaylenko <alicem@mailbox.org>
Sun, 9 Jun 2024 14:33:43 +0000 (18:33 +0400)
committerMarge Bot <marge-bot@gnome.org>
Thu, 20 Jun 2024 13:18:00 +0000 (13:18 +0000)
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2715>

23 files changed:
data/theme/gnome-shell-sass/_colors.scss
data/theme/gnome-shell-sass/_common.scss
data/theme/gnome-shell-sass/_default-colors.scss
data/theme/gnome-shell-sass/_drawing.scss
data/theme/gnome-shell-sass/_high-contrast-colors.scss
data/theme/gnome-shell-sass/widgets/_a11y.scss
data/theme/gnome-shell-sass/widgets/_base.scss
data/theme/gnome-shell-sass/widgets/_calendar.scss
data/theme/gnome-shell-sass/widgets/_check-box.scss
data/theme/gnome-shell-sass/widgets/_dialogs.scss
data/theme/gnome-shell-sass/widgets/_ibus-popup.scss
data/theme/gnome-shell-sass/widgets/_keyboard.scss
data/theme/gnome-shell-sass/widgets/_login-lock.scss
data/theme/gnome-shell-sass/widgets/_looking-glass.scss
data/theme/gnome-shell-sass/widgets/_message-list.scss
data/theme/gnome-shell-sass/widgets/_misc.scss
data/theme/gnome-shell-sass/widgets/_osd.scss
data/theme/gnome-shell-sass/widgets/_quick-settings.scss
data/theme/gnome-shell-sass/widgets/_screenshot.scss
data/theme/gnome-shell-sass/widgets/_slider.scss
data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
data/theme/gnome-shell-sass/widgets/_switches.scss
data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss

index ffd4e9fc9ce23bfbe0bc7dbd5d280c5045fb735a..cbb3b716e8648775be24996ec768b19761cd3f96 100644 (file)
@@ -65,5 +65,5 @@ $hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color,
 $active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
 $active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));
 
-// selection colors
-$selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), lighten($selected_bg_color, 15%));
\ No newline at end of file
+// accent colors
+$accent_borders_color: if($variant== 'light', st-darken(-st-accent-color, 15%), st-lighten(-st-accent-color, 15%));
index 673e9ce507630d10fdc25bbebcc285608ce0a828..2124a3a2f0ad683489e2327a6c0126dc0b680679 100644 (file)
@@ -117,11 +117,11 @@ stage {
 }
 
 %default_button {
-  @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);
-  &:focus { @include button(focus, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
-  &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
-  &:insensitive { @include button(insensitive, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
-  &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color, $style: default);}
+  @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);
+  &:focus { @include button(focus, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
+  &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
+  &:insensitive { @include button(insensitive, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
+  &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color, $style: default);}
 }
 
 // items in popover menus
@@ -173,7 +173,7 @@ stage {
   border-radius: $base_border_radius;
   padding: $base_padding * 1.5 $base_padding * 1.5;
 
-  selection-background-color: transparentize($selected_bg_color, 0.7);
+  selection-background-color: st-transparentize(-st-accent-color, 0.7);
   selected-color: $fg_color;
 }
 
index 6c700871f691d213c55c58d484c153e12cce502c..bf185414086dcdbba39bb73f882eaa55775fe58a 100644 (file)
@@ -22,13 +22,9 @@ $error_bg_color: if($variant == 'light', $red_3, $red_4);
 $error_fg_color: $light_1;
 $error_color: $error_bg_color;
 
-// colors for selected or default elements
-$selected_bg_color: if($variant == 'light', $blue_4, $blue_3);
-$selected_fg_color: $light_1;
-
 // link colors
-$link_color: if($variant == 'light', $blue_4, $blue_2);
-$link_visited_color: transparentize($link_color, .6);
+$link_color: if($variant == 'light', st-darken(-st-accent-color, 10%), st-lighten(-st-accent-color, 20%));
+$link_visited_color: st-transparentize($link_color, .6);
 
 // special cased widget definitions
 $background_mix_factor: if($variant == 'light', 12%, 9%); // used to boost the color of backgrounds in different variants
@@ -39,8 +35,8 @@ $shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
 $text_shadow_color: if($variant == 'light', rgba(255,255,255,0.3), rgba(0,0,0,0.2));
 
 // focus colors
-$focus_color: $selected_bg_color;
-$focus_border_color: transparentize($focus_color, 0.5);
+$focus_color: -st-accent-color;
+$focus_border_color: st-transparentize($focus_color, 0.5);
 
 // High Contrast overrides
 @if $contrast == 'high' {
@@ -50,5 +46,5 @@ $focus_border_color: transparentize($focus_color, 0.5);
     $shadow_color: transparent;
     $text_shadow_color: transparent;
     // less transparent focus color
-    $focus_border_color: transparentize($focus_color, 0.2);
+    $focus_border_color: st-transparentize($focus_color, 0.2);
 }
index 39c6eb7b51c6ded7279adac1f956b351af5ee2e4..447feb6a4d8eec63bfaa17f3805586f1ae600ccc 100644 (file)
   // $mc: mix color, defined in High Contrast specific stylesheet
   // $mf: mix factor (%), defined in High Contrast specific stylesheet
   //
-  @return mix($c, $mc, $mf);
+  @return st-mix($c, $mc, $mf);
 }
 
 // Function to mix the color and make the focus background
 @function focus_bg_color($bg, $fc:$focus_color) {
-  @return mix($fc, $bg, 5%);
+  @return st-mix($fc, $bg, 5%);
 }
 
 //
   //
 
   // mix input colors to get button background color
-  $button_bg_color: mix($tc, $c, $background_mix_factor);
+  $button_bg_color: st-mix($tc, $c, $background_mix_factor);
 
   // background color override for card elements
   @if $style == 'card' { $button_bg_color: $card_bg_color;}
   }
 
   // button base state background colors
-  $hover_button_bg_color: if($variant == 'light', darken($button_bg_color, $hover_factor), lighten($button_bg_color, $hover_factor));
-  $active_button_bg_color: if($variant == 'light', darken($button_bg_color, $active_factor), lighten($button_bg_color, $active_factor));
-  $checked_button_bg_color: if($variant == 'light', darken($button_bg_color, $checked_factor), lighten($button_bg_color, $checked_factor));
-  $insensitive_button_bg_color: if($variant == 'light', lighten($button_bg_color, $insensitive_factor), darken($button_bg_color, $insensitive_factor));
+  $hover_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $hover_factor), st-lighten($button_bg_color, $hover_factor));
+  $active_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $active_factor), st-lighten($button_bg_color, $active_factor));
+  $checked_button_bg_color: if($variant == 'light', st-darken($button_bg_color, $checked_factor), st-lighten($button_bg_color, $checked_factor));
+  $insensitive_button_bg_color: if($variant == 'light', st-lighten($button_bg_color, $insensitive_factor), st-darken($button_bg_color, $insensitive_factor));
 
   // button extended state background colors
-  $active_hover_button_bg_color: if($variant == 'light', darken($active_button_bg_color, $hover_factor), lighten($active_button_bg_color, $hover_factor));
-  $checked_hover_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $hover_factor), lighten($checked_button_bg_color, $hover_factor));
-  $checked_active_button_bg_color: if($variant == 'light', darken($checked_button_bg_color, $active_factor), lighten($checked_button_bg_color, $active_factor));
+  $active_hover_button_bg_color: if($variant == 'light', st-darken($active_button_bg_color, $hover_factor), st-lighten($active_button_bg_color, $hover_factor));
+  $checked_hover_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $hover_factor), st-lighten($checked_button_bg_color, $hover_factor));
+  $checked_active_button_bg_color: if($variant == 'light', st-darken($checked_button_bg_color, $active_factor), st-lighten($checked_button_bg_color, $active_factor));
 
   // override button background colours if element is always dark
   @if $always_dark {
-    $hover_button_bg_color: lighten($button_bg_color, $hover_factor);
-    $active_button_bg_color: lighten($button_bg_color, $active_factor);
-    $checked_button_bg_color: lighten($button_bg_color, $checked_factor);
-    $insensitive_button_bg_color: darken($button_bg_color, $insensitive_factor);
+    $hover_button_bg_color: st-lighten($button_bg_color, $hover_factor);
+    $active_button_bg_color: st-lighten($button_bg_color, $active_factor);
+    $checked_button_bg_color: st-lighten($button_bg_color, $checked_factor);
+    $insensitive_button_bg_color: st-darken($button_bg_color, $insensitive_factor);
     // extended
-    $active_hover_button_bg_color: lighten($active_button_bg_color, $hover_factor);
-    $checked_hover_button_bg_color: lighten($checked_button_bg_color, $hover_factor);
-    $checked_active_button_bg_color: lighten($checked_button_bg_color, $active_factor);
+    $active_hover_button_bg_color: st-lighten($active_button_bg_color, $hover_factor);
+    $checked_hover_button_bg_color: st-lighten($checked_button_bg_color, $hover_factor);
+    $checked_active_button_bg_color: st-lighten($checked_button_bg_color, $active_factor);
   }
 
   // background color override for buttons that use transparency
 
   // insensitive button
   @else if $type == 'insensitive' {
-    $insensitive_button_fg_color: if($variant == 'light', transparentize($tc, .6), transparentize($tc, .5));
+    $insensitive_button_fg_color: if($variant == 'light', st-transparentize($tc, .6), st-transparentize($tc, .5));
     color: $insensitive_button_fg_color;
     background-color: $insensitive_button_bg_color;
 
 
     // use a different focus ring color for default style
     @if $style == 'default' {
-      @include focus_ring($fc:$selected_borders_color);
+      @include focus_ring($fc:$accent_borders_color);
     }
     // change background color if style is flat
     @if $style == 'flat' {
   }
 
   &:drop {
-    background-color: transparentize($selected_bg_color, .8);
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .2);
+    background-color: st-transparentize(-st-accent-color, .8);
+    box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .2);
   }
 }
 
index 3cc447c22a770089ecbeccf90e802932b46cb440..3b05e0b9a3c00e51e0718feb205a363e73443435 100644 (file)
@@ -64,8 +64,8 @@ $hover_fg_color: lighten($fg_color, 20%);
 $active_bg_color: lighten($bg_color, 22%);
 $active_fg_color: lighten($fg_color, 22%);
 
-// selection colors
-$selected_borders_color: lighten($selected_bg_color, 30%);
+// accent colors
+$accent_borders_color: st-lighten(-st-accent-color, 30%);
 
 //
 // High Contrast specific definitions
index 31b5c4b7e288720f8ba1db704d82a3a517f32b42..0bbf185b6a742a063eb6cc6cb0bb4b9171d7ff46 100644 (file)
@@ -3,8 +3,8 @@
   width: $ripple_size;
   height: $ripple_size;
   border-radius: $ripple_size * 0.5; // radius equals the size of the box to give us the curve
-  background-color: lighten(transparentize($selected_bg_color, 0.7), 30%);
-  box-shadow: 0 0 2px 2px lighten($selected_bg_color, 20%);
+  background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 30%);
+  box-shadow: 0 0 2px 2px st-lighten(-st-accent-color, 20%);
 }
 
 // Pointer accessibility notifications
   width: 60px;
   height: 60px;
   -pie-border-width: 3px;
-  -pie-border-color: $selected_bg_color;
-  -pie-background-color: lighten(transparentize($selected_bg_color, 0.7), 40%);
+  -pie-border-color: -st-accent-color;
+  -pie-background-color: st-lighten(st-transparentize(-st-accent-color, 0.7), 40%);
 }
 
 // Screen zoom/Magnifier
 .magnifier-zoom-region {
-  border: 2px solid $selected_bg_color;
+  border: 2px solid -st-accent-color;
 
   &.full-screen { border-width: 0; }
 }
index 20a1666e2f6354e00d8b1fd15b8828ca4e800425..0a9618d3008d100cee66f3ecad4461d0ad476b84 100644 (file)
@@ -3,7 +3,7 @@
   color: $link_color;
 
   &:hover {
-    color: lighten($link_color, 10%);
+    color: st-lighten($link_color, 10%);
   }
 }
 
index 80b30dc930bf41a2859f66364b5fb8fa3483a1e9..a4c6a88708979cb2740adac91d897fa55022f03b 100644 (file)
     &.calendar-today {
       @extend %default_button;
       // override colors above for when today is a weekend
-      color: $selected_fg_color !important;
+      color: -st-accent-fg-color !important;
       &.calendar-day-with-events {
         background-image: url("resource:///org/gnome/shell/theme/calendar-today.svg") !important; // always use light asset with .default style
       }
index f18d6418cf23da3adf766cd24269bcd5628b1439..956a59ee52121e7d104bf67502b3269fdb1e5103 100644 (file)
@@ -11,7 +11,7 @@
   &:focus StBin {
     // Trick due to St limitations. It needs a background to draw a box-shadow
     background-color: rgba(0, 0, 0, 0.01);
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, .65);
+    box-shadow: inset 0 0 0 2px st-transparentize(-st-accent-color, .65);
   }
 
   StIcon {
   }
 
   &:checked StIcon {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
+    background-color: -st-accent-color;
+    color: -st-accent-fg-color;
     border-color: transparent;
   }
 
   &:checked:hover StIcon {
-    background-color: lighten($selected_bg_color, 5%);
-    color: lighten($selected_fg_color, 5%);
+    background-color: st-lighten(-st-accent-color, 5%);
+    color: st-lighten(-st-accent-fg-color, 5%);
   }
 
   &:checked:active StIcon {
-    background-color: darken($selected_bg_color, 7%);
-    color: darken($selected_fg_color, 7%);
+    background-color: st-darken(-st-accent-color, 7%);
+    color: st-darken(-st-accent-fg-color, 7%);
   }
 }
index 48bb9c0ca67703f6943bbf91d9e7191dd1c353f9..2f21f9447bcd870cf4433c175be5fba27fb83929 100644 (file)
   border-radius: $base_border_radius * 2;
   &:hover,&:focus { background-color: $hover_bg_color; }
   &:active {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
+    background-color: -st-accent-color;
+    color: -st-accent-fg-color;
   }
 }
 
index c1c0cfad8606b8da0a56a5887e197317ad87f0ad..648c375c46fe625c29e5085967a22bda0b99ae38 100644 (file)
@@ -19,7 +19,7 @@
 .candidate-box {
   padding: $base_padding $base_padding * 2 $base_padding $base_padding * 2;
   border-radius: $base_border_radius;
-  &:selected { background-color: $selected_bg_color; color: $selected_fg_color; }
+  &:selected { background-color: -st-accent-color; color: -st-accent-fg-color; }
   &:hover { background-color: $hover_bg_color; color: $hover_fg_color; }
 }
 
index 39e63949f3487c7346a1e5ade12abdf2974604b9..489da579157d37d7d2561a59d87fac787f3abd88 100644 (file)
@@ -63,17 +63,17 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
 
     // keys that may be latched: ctrl/alt/shift
     &:latched {
-      border-color: lighten($selected_bg_color, 5%);
-      background-color: $selected_bg_color;
+      border-color: st-lighten(-st-accent-color, 5%);
+      background-color: -st-accent-color;
     }
   }
 
   // enter key is suggested-action
   &.enter-key {
-    @include button(normal, $c:$selected_bg_color, $tc:$selected_fg_color);
-    &:hover { @include button(hover, $c:$selected_bg_color, $tc:$selected_fg_color);}
-    &:active { @include button(active, $c:$selected_bg_color, $tc:$selected_fg_color);}
-    &:checked { @include button(checked, $c:$selected_bg_color, $tc:$selected_fg_color);}
+    @include button(normal, $c:-st-accent-color, $tc:-st-accent-fg-color);
+    &:hover { @include button(hover, $c:-st-accent-color, $tc:-st-accent-fg-color);}
+    &:active { @include button(active, $c:-st-accent-color, $tc:-st-accent-fg-color);}
+    &:checked { @include button(checked, $c:-st-accent-color, $tc:-st-accent-fg-color);}
     border-radius: $key_border_radius;
     color: $osd_fg_color;
   }
@@ -128,8 +128,8 @@ $default_key_bg_color: if($variant=='light', darken($key_bg_color, 11%), darken(
 
 .emoji-panel {
   .keyboard-key:latched {
-    border-color: lighten($selected_bg_color, 5%);
-    background-color: $selected_bg_color;
+    border-color: st-lighten(-st-accent-color, 5%);
+    background-color: -st-accent-color;
   }
 }
 
index 909fa62385b559d03b0c21b023c9aaf076e11347..7e00a46235be27911bb812cce646a2a27bb34a10 100644 (file)
@@ -128,8 +128,8 @@ $_gdm_dialog_width: 25em;
   color: darken($_gdm_fg,30%);
 
   &:focus, &:selected {
-    background-color: $selected_bg_color;
-    color: $selected_fg_color;
+    background-color: -st-accent-color;
+    color: -st-accent-fg-color;
   }
 }
 
@@ -175,9 +175,9 @@ $_gdm_dialog_width: 25em;
       &:logged-in {
         // color border for logged-in user
         .user-icon {
-          border-color: $selected_bg_color;
+          border-color: -st-accent-color;
           StIcon {
-            background-color: transparentize($selected_bg_color, .7);
+            background-color: st-transparentize(-st-accent-color, .7);
           }
         }
       }
@@ -238,7 +238,7 @@ $_gdm_dialog_width: 25em;
   StButton#vhandle, StButton#hhandle {
     background-color: transparentize($bg_color,0.7);
     &:hover, &:focus { background-color: transparentize($bg_color,0.5); }
-    &:active { background-color: transparentize($selected_bg_color,0.5); }
+    &:active { background-color: st-transparentize(-st-accent-color,0.5); }
   }
 }
 
index 7b8d9047517fa27c292a5bda7dfe864f0527c986..53cf74fffd1ca27e3a70d72a8b238e67af753ec9 100644 (file)
@@ -59,8 +59,8 @@
 
   .shell-link {
     color: $link_color;
-    &:hover { color: lighten($link_color, 10%); }
-    &:active { color: darken($link_color, 10%); }
+    &:hover { color: st-lighten($link_color, 10%); }
+    &:active { color: st-darken($link_color, 10%); }
    }
 
   .actor-link {
index f07ac0e2ace94e0e0b80fc9120dafbef348376b4..0fb1c8d2a4176eb577a3418a5d7aa64a985b4707 100644 (file)
@@ -56,7 +56,7 @@
     border-style: solid;
 
     &:focus {
-      border-color: transparentize($selected_bg_color, 0.4);
+      border-color: st-transparentize(-st-accent-color, 0.4);
     }
   }
 }
index 35f9dc9a129c012b5ca47b29bd6d887b0d83a3c3..2f1bfc3a4c1143c90b21aef627d9b97334e6d0bd 100644 (file)
@@ -1,7 +1,7 @@
 // Rubberband for select-area screenshots
 .select-area-rubberband {
-  background-color: transparentize($selected_bg_color,0.7);
-  border: 1px solid $selected_bg_color;
+  background-color: st-transparentize(-st-accent-color,0.7);
+  border: 1px solid -st-accent-color;
 }
 
 // User icon
@@ -48,6 +48,6 @@
 
 /* Tiled window previews */
 .tile-preview {
-  background-color: transparentize($selected_bg_color,0.5);
-  border: 1px solid $selected_bg_color;
+  background-color: st-transparentize(-st-accent-color,0.5);
+  border: 1px solid -st-accent-color;
 }
index 55cf44ac34bff037c24fc8fc47a9bdf020c8e3b9..13a77bca316eda78b8eb604532270534e05f2092 100644 (file)
@@ -36,8 +36,8 @@ $osd_levelbar_height:6px;
 
 // Monitor number label
 .osd-monitor-label {
-  background-color: $selected_bg_color;
-  color: $selected_fg_color;
+  background-color: -st-accent-color;
+  color: -st-accent-fg-color;
   border-radius: $modal_radius;
   font-size: 3em;
   font-weight: bold;
index c43081baf03ad800ea246c46d3ce6df043fc5010..71b1a14488db330fffa63751c793e737af14e101 100644 (file)
@@ -64,7 +64,7 @@
 
     &:checked {
       @extend %default_button;
-      border-color: $selected_borders_color;
+      border-color: $accent_borders_color;
     }
 
     &:ltr {
       background-color: transparentize($fg_color, 0.8);
 
       &.active {
-        background-color: $selected_bg_color;
-        color: $selected_fg_color;
+        background-color: -st-accent-color;
+        color: -st-accent-fg-color;
       }
 
       // draw hc outline
index 05ecd95c30c05560795d9b15953a6b4a226ca29d..5d10b782f2eaeb77390b2de0411a413f8935d55f 100644 (file)
@@ -168,18 +168,18 @@ $screenshot_ui_button_red: $red_4;
 .screenshot-ui-window-selector-window {
   &:hover {
     .screenshot-ui-window-selector-window-border {
-      border-color: darken($selected_bg_color, 15%);
+      border-color: st-darken(-st-accent-color, 15%);
     }
   }
   &:checked {
     .screenshot-ui-window-selector-window-border {
-      border-color: $selected_bg_color;
-      background-color: transparentize($selected_bg_color, 0.8);
+      border-color: -st-accent-color;
+      background-color: st-transparentize(-st-accent-color, 0.8);
     }
 
     .screenshot-ui-window-selector-check {
-      color: $selected_fg_color;
-      background-color: $selected_bg_color;
+      color: -st-accent-fg-color;
+      background-color: -st-accent-color;
     }
   }
 }
index 6ba104d6fceba89c0df86f11c275d3efe3654cbc..b75c6fb32a42649d9aa70998a27feaaeadf203e0 100644 (file)
@@ -9,7 +9,7 @@ $slider_size: $scalable_icon_size;
   -barlevel-height: 4px;
   -barlevel-background-color: transparentize($fg_color, 0.9);
   // fill style
-  -barlevel-active-background-color: $selected_bg_color;
+  -barlevel-active-background-color: -st-accent-color;
   // overfill style (red in this case)
   -barlevel-overdrive-color: $destructive_color;
   -barlevel-overdrive-separator-width:1px;
index bf534b0471d615717991fc9e70eee2c707e6192d..9ac607df45a2df048f897e41f369580c10114ed5 100644 (file)
@@ -78,5 +78,5 @@ $switcher_radius: $modal_radius + $switcher_padding;
 
 // Window cycler highlight
 .cycler-highlight {
-  border: 5px solid $selected_bg_color;
+  border: 5px solid -st-accent-color;
 }
index 28416b5c89e94f8c31927d6eb6ae6bfa0cc1a623..ec79e1fe2268800d1f841eafc3d0627626276d6c 100644 (file)
@@ -38,12 +38,12 @@ $switch_handle_size: 20px;
   }
 
   &:checked {
-    background: $selected_bg_color;
-    color: $selected_fg_color;
+    background: -st-accent-color;
+    color: -st-accent-fg-color;
 
     &:hover {
-      background-color: lighten($selected_bg_color, 5%);
-      color: lighten($selected_fg_color, 5%);
+      background-color: st-lighten(-st-accent-color, 5%);
+      color: st-lighten(-st-accent-fg-color, 5%);
     }
 
     .handle {
index e9b9ceacd6220bd5b3f8648d35c214db03710f6c..f7e7e4b22f010562b1fa1166176e7e5202553ac4 100644 (file)
@@ -27,6 +27,6 @@
 
 // selected indicator
 .workspace-thumbnail-indicator {
-  border: 3px solid $selected_bg_color;
+  border: 3px solid -st-accent-color;
   border-radius: $base_border_radius;
 }